<template>
    <div class="ronetry">
            <!-- 顶部组件 -->
            <header-nav></header-nav>
            <!-- 轮播图 -->
            <div class="banner">
              <div class="imgs">
                <van-swipe class="my-swipe" :loop="false" :autoplay="3000" indicator-color="white" >
                 <van-swipe-item v-for="(item,index) in imgs" :key="index">
                    <img :src="item.pic" alt="">
                  </van-swipe-item>
                </van-swipe>
              </div>
            </div>
            <!-- 推荐歌单 -->
            <div class="remLists">
                <div class="title"><span>推荐歌单</span><router-link tag="span" to="/attent" class="duo">更多</router-link></div>
                <!-- <span class="duo" @click="$router.push('/songmoress')"></span> -->
                <div class="content">
                    <ul>
                      <div class="swiper-container swiper-container-01">
                        <div class="swiper-wrapper">
                          <div class="swiper-slide item" v-for="(item,index) in recommend_song" :key="index"  v-show="index<10">
                            <li >
                              <div class="img">
                                  <van-image
                                      lazy-load
                                      :src="item.picUrl"
                                      
                                      />
                                  <!-- <img v-lazy= item.picUrl alt=""> -->
                              </div>
                              <p>{{item.name}}</p>
                              <span><i class="iconfont icon-erji"></i>{{item.playCount|playCountData}}</span>
                            </li>
                          </div>
                        </div>
                      </div>
                    </ul>
                </div>
            </div>
            <!-- 音乐街 -->
            <div class="street">
                <div class="title"><span>走过华语音乐街</span><span class="duo" @click="$router.push('/rank')">更多</span></div>
                <ul>
                      <div class="swiper-container swiper-container-02">
                         <div class="swiper-wrapper">
                             <div class="swiper-slide item02" v-for = "(item,index) in  musiclist" :key = "index" >
                               <li tttt>
                                <van-cell>
                                  <template #title>
                                    <div class="van-cell-title" v-for="(ele,i) in item.tracks" :key="ele.id" @click="getplayer(ele.id)"  v-show="i<3" >
                                      <img width="50" height="50" v-lazy="ele.al.picUrl">
                                         <!-- <van-image
                                          lazy-load
                                          width="50"
                                          height="50"
                                          :src="ele.al.picUrl"
                                          /> -->
                                          <!--  -->
                                          <div class="tet">
                                              <span class="custom-title comto">
                                              {{ele.name}} 
                                               </span>
                                               <span>-- {{ele.ar[0].name}}</span> 
                                          </div>
                                    </div>
                                  </template>
                                </van-cell>
                                </li>
                              </div>
                          </div>
                      </div>
                </ul>
                
            </div>
            <!-- mv -->
            <div class="mvto">
                <div class="nav-to">
                        <div class="leftnav">
                            <span>mv</span>
                        </div>
                        <!-- <div class="rightnav">
                            <span>更多</span>
                            <span class="iconfont icon-zuoyou2"></span>
                        </div> -->
                </div>
                <div class="mvtoto" v-if="aaa.result">
                    <div class="mvimg" v-for="(item,index) in aaa.result" :key="item.id" @click="getmvid(item.id)" v-show="index<3" >
                        <div class="img" v-if="item.picUrl">
                          <van-image
                          lazy-load
                           :src="item.picUrl"
                          />
                            <!-- <img v-lazy="item.picUrl" alt=""> -->
                        </div>
                         <p v-if="item.name">
                            <!-- <span class="con">超10万收藏</span> -->
                            <span>{{item.name}}</span>
                         </p>
                    </div>
                </div>
            </div>
          <!-- 底部导航 -->
          <!-- <foot-nav></foot-nav> -->
    </div>
</template>
<script>
//引入头部组件
import headerNav from "../components/base/headerNav.vue"

//引入底部导航
// import footNav from "../components/base/footNav.vue"

  import {getBanner,getPersonalizedr,getStreet,getrankingList,gettotomv,getmvlist} from "../api/recommend";
 
import Swiper from'swiper';
export default {
  props:["mydeid"],
  data(){
    return {
      imgs:null,
      recommend_song:null,
      musiclist:[],
      aaa:{
        result:{}
      }
    }
  },
  methods:{
      getrecom(){
          getBanner().then(data=>{
            // console.log(data);
            this.imgs = data.banners
          }),
          getPersonalizedr().then(data=>{
            // console.log(data);
            this.recommend_song=data.result
          })
          getrankingList().then(data=>{
                for(let i =0 ;i<10;i++){
                    let id = data.list[i].id;
                    getStreet({
                      id:id,
                      limit:10
                    }).then(data=>{
                        //  this.playlist.push()
                        this.musiclist.push(data.playlist)
                        //  console.log(data.playlist)
                    })
                }
          })
         
      },
      getdd(){
         gettotomv().then(data=>{
            // console.log(data)
            this.aaa=data
            // aaa
          })
      },
      getmvid(id){
          console.log(id)
          this.$emit("getmvplay-id",id)
          getmvlist({id:id}).then(data=>{
            console.log(data)
          })
      },
      getplayer(id){
        console.log(id)
          this.$emit("get-player-id",id)
          this.$emit("get-play-all-id",this.$route.query.id);//传递di
      }
      
  },
  //过滤器
  filters:{
    playCountData(value){
       let w = value >10000? value /10000:value ;
       let y = w >10000?parseInt(value/10000) +"亿" : parseInt(w) + "万"
       return y
    }
  },
  created(){
        this.getrecom()
        this.getdd()
  },
  mounted(){
    new Swiper('.swiper-container-01', {
        pagination: '.swiper-pagination-01',
        // centeredSlides: true,
        slidesPerView: 3,
        scrollbarDraggable:true,
        observer:true,
        observeParkents:true,
        paginationClickable:true,
        spaceBetween:1
    });
     new Swiper('.swiper-container-02',{
        pagination: '.swiper-pagination-02',
        slidesPerView: 1,  //显示个数
        scrollbarDraggable:true,
        paginationClickable: true,
        observer:true,
        observeParkents:true,
        spaceBetween: 2 //div之间间距
    });
  },

  components:{
    headerNav,
    // footNav
  },

};
</script>
<style lang="less">
.ronetry{
  width: 100%;
  height: 100%;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}
//轮播图
.banner{
  // background-color: #fff;
   &::before {
    content: "";
    display: block;
    height: 124px;
    background-color: #d44439;
    //  z-index: 100px;
    position: absolute;
    width: 100%;
    z-index: 1;
     
  }
  position:relative;
   .imgs{
     z-index: 10;
     position: relative;
     left:0;
     right:0;
     top:0;
     margin:auto;
     width:96%;
     border-radius:4px;
     overflow:hidden;
      // background-color: #fff;
      img {
        width: 100%;
        height: 100%;
      }
   }
}
//推荐歌单
.remLists {
  //  border-bottom: 1px solid #ebebeb;
   padding-bottom: 10px;
   border-radius: 0px 0px 10px 10px;
   background-color: #fff;
  //  border-bottom: ;
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 16px;
    font-size: 16px;
    color:#000;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    .duo{
      top: 20px;
      margin-right: 10px;
      position: relative;
      line-height:20px;
      // border: 1px solid #ebebeb;
      border-radius: 10px 10px 10px 10px;
      height: 20px;
      display: block;
      text-align: center;
      padding-right: 10px;
      box-sizing: border-box;
    }
  }
  .content{
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li{
        flex: 0 0 32%;
        position: relative;
        margin-left: 3px;
        margin-right: 3px;
        span{
          position:absolute;
          top:0px;
          right: 0px;
          color:#fff;
          font-size: 15px;
          i{
            font-size: 15px;
            vertical-align: middle;
          }
        }
        .img{
          min-height: 50px;
          width: 100%;
          border-radius:3px;
          img{
            width: 100%;
            border-radius:3px;
          }
        }
         p{
            font-size: 12px;
            color:#565658;
            line-height: 18px;
            padding: 5px;
            height: 22px;
            margin-bottom: 10px;
          }
      }
    }
  }
}
//音乐街
.street{
    margin-top: 7px;
    // border: 1px solid #ebebeb;
    background-color: #fff;
    border-radius: 10px 10px 10px 10px;
    // border-radius: 10px 10px;
    padding-top: 10px;
    padding-bottom: 5px;
    box-sizing: border-box;
  .title {
    height: 25px;
    line-height: 25px;
    text-indent: 16px;
    font-size: 16px;
    color:#000;
    // font-weight: bold;
    display: flex;
    font-weight: 600;
    justify-content: space-between;
    .duo{
      // border: 1px solid #ebebeb;
      margin-right: 10px;
      border-radius: 10px 10px 10px 10px;
      height: 20px;
      display: block;
      text-align:center;
      padding-right: 10px;
      line-height: 20px;
      font-size: 16px;
    }
  }
    .van-cell-title{
    display: flex;
    align-items: center;
    // margin-top: 8px;
    height: 50px;
    padding: 5px;
    // border-bottom: 1px solid #D9DADB;
      .tet{
          height:100%;
          width: 80%;
          line-height: 50px;
          margin-left: 10px;
           overflow: hidden;
          span{
            // display:block;
            height: 18px;
            margin: 3px;
            &.comto{
              overflow: hidden;
              font-size: 16px;
            }
            // margin-left:15px;
          }

      }
      .bo{
        width: 10%;
        height: 100%;
        // color: ;
        font-size: 20px;
        position:relative;
        // right: 10px;
         span{
           position: absolute;
           right: 0;
           bottom:10px ;
         }
      }
    
    
   }

  
 
}
//mv
.mvto{
  margin-top: 7px;
  width: 100%;
  padding: 10px;
  box-sizing:border-box;
  border-radius: 10px;
  background-color: #fff;
  // border: 1px solid #ebebeb;
  
  .nav-to{
        width: 100%;
        height: 30px;
        line-height: 30px;
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
        .leftnav{
            font-size: 22px;
            color: #434343;
        }
        .rightnav{
            margin-top: 3px;
            padding: 3px;
            box-sizing: border-box;
            font-size: 12px;
            height: 30px;
            // border: 1px solid #7e7e7e;
            border-radius: 20px;
            color:black;
            line-height: 20px;
            .iconfont{
                font-size: 10px;
            }
        }
    }
  .mvtoto{
    width: 100%;
    // height: 70px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .mvimg{
       width: 30%;
       height: 150px;
       // position: relative;
       .img{
           border-radius: 10px;
           width: 100%;
           height: 105px;
           img{
               height: 105px;
               border-radius: 10px;
           }
       }
       p{
           width: 100%;
           font-size: 10px;
           span{
               &.con{
                   color:#f2b99a ;
               }
           }
       }
            
    }
  }
}

</style>